<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="<?php echo site_url() ?>assets/js/datepicker/daterangepicker-bs3.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>assets/js/datepicker/moment.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>assets/js/datepicker/daterangepicker.js"></script>
<link href="<?php echo site_url() ?>assets/css/nhatnv.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript">
            $(function () {

            $('#dropup').val('<?php echo $time ?>');
                    $('#dropup').daterangepicker({
            format: 'DD/MM/YYYY',
                    showDropdowns: true,
                    ranges: {
                    'Today': [moment(), moment()],
                            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                            'This Month': [moment().startOf('month'), moment().endOf('month')],
                            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    buttonClasses: ['btn', 'btn-sm'],
                    applyClass: 'btn-primary',
                    cancelClass: 'btn-default',
                    separator: '-',
            }, function (start, end, label) {
            var url = '<?php echo site_url() ?>customer-detail?id=<?php echo $id ?>&mac=<?php echo $mac ?>&time=' + $('#dropup').val();
                    window.location = url;
            });
            });</script>
<input type="hidden" name="mac" id="mac" value="<?php echo $mac ?>" />
<input type="hidden" name="id" id="id" value="<?php echo $id ?>" />
<div id="sidetabs_body_container">
    <div id="table_area" style="">
        <div id="action_bar" class="action_bar">
            <div id="detail_header">
                <table class="lean width100">
                    <tbody>
                        <tr>
                            <td>
                                <div class="div-label-client">
                                    <h1 class="db s3name label-client"><?php echo $data->vname ? $data->vname : $data->callingstationid ?> <?php echo $data->osname ? '- ' . $data->osname : '' ?></h1>
                                    <button style="font-size: 20px;  padding: 3px 9px;" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"><i class="icon-pencil"></i></button>
                                    <button data-mac="<?php echo $mac ?>" data-id="<?php echo $id ?>" data-type="1" style="background: rgb(224, 0, 0);border: 1px solid #D30000;font-size: 20px;  padding: 3px 11px;" type="button" class="btn btn-primary btn-lg change-method-access-device" title="Chặn người dùng này"><i class="fa fa-shield"></i></button>
                                    <button data-mac="<?php echo $mac ?>" data-id="<?php echo $id ?>" data-type="2" style="background: rgb(122, 192, 67);  border: 1px solid #23C700;font-size: 20px;  padding: 3px 11px;" type="button" class="btn btn-primary btn-lg change-method-access-device" title="Vào trực tiếp"><i class="fa fa-shield"></i></button>
                                    <button data-mac="<?php echo $mac ?>" data-id="<?php echo $id ?>" data-type="3" style="    background: #399bcd;
    border: 1px solid #297FAB;font-size: 20px;  padding: 3px 11px;" type="button" class="btn btn-primary btn-lg change-method-access-device" title="Trạng thái truy cập bình thường"><i class="fa fa-sign-in"></i></button>


                                </div>
                                <div class="input-prepend input-group box-datetime">
                                    <span class="add-on input-group-addon">
                                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                    </span>
                                    <input type="text" style="width: 200px;height: 30px;" name="dropup" id="dropup" class="form-control" value="Chọn ngày tháng"> 
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <hr class="s3" style="clear:both">
            </div>
        </div>
        <div id="detail_area">
            <div id="details_wrapper" class="hideport3">
                <div class="column-50" style="width: 40%">
                    <div id="node_info_details" style="width: 100%">

                        <div id="nodeinfo" class="statusinfo">
                            <table class="s3basic status_table">
                                <tbody>

                                    <tr class="base s3tr_address allow_wrap">
                                        <td class="s3l" style="  width: 80px;padding-left: 0px;">Status:</td>
                                        <td class="s3x">
                                            <span class="atomic">
                                                <?php
                                                if (!in_array($data->acctstoptime, array(null, '', '0'))) {
                                                    echo '<i class="mks-cli-wireless-off" title="Off wireless client"></i>';
                                                } else {
                                                    echo '<i class="mks-cli-wireless-on" title="On wireless client"></i>';
                                                }
                                                ?>
                                                &nbsp;&nbsp;  last seen
                                                <?php echo $data->acctstoptime ? $data->acctstoptime : date('H:i:s d/m/Y') ?>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr class="base s3tr_address allow_wrap">
                                        <td class="s3l" style="  width: 80px;padding-left: 0px;">Access point:</td>
                                        <td class="s3x">
                                            <span class="atomic">
                                                <a href="<?php echo site_url() . 'edit-device?id=' . md5($data->id) ?>"><?php echo $data->namedevice ?></a>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr class="base s3tr_address allow_wrap">
                                        <td class="s3l" style="  width: 80px;padding-left: 0px;">Capabilities:</td>
                                        <td class="s3x">
                                            <span class="atomic">
                                                <?php echo $data->nasporttype ?>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr class="base s3tr_address allow_wrap">
                                        <td class="s3l" style="  width: 80px;padding-left: 0px;">Device OS:</td>
                                        <td class="s3x">
                                            <span class="atomic">
                                                <?php echo $data->osname ? $data->osname : 'No records' ?>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr class="base s3tr_address allow_wrap">
                                        <td class="s3l" style="  width: 80px;padding-left: 0px;">Disconnect method:</td>
                                        <td class="s3x">
                                            <span class="atomic">
                                                <?php echo $data->acctterminatecause ? $data->acctterminatecause : 'Unknow' ?>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr class="base s3tr_address allow_wrap">
                                        <td class="s3l" style="  width: 80px;padding-left: 0px;">IPv4 address:</td>
                                        <td class="s3x">
                                            <span class="atomic">
                                                <?php echo $data->framedipaddress ? $data->framedipaddress : 'Unknow' ?>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr class="base s3tr_address allow_wrap">
                                        <td class="s3l" style="  width: 80px;padding-left: 0px;">Bandwidth:</td>
                                        <td class="s3x">
                                            <span class="atomic">
                                                <?php echo @$sumbw ? @$sumbw : 'Unknow' ?>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr class="base s3tr_address allow_wrap">
                                        <td class="s3l" style="  width: 80px;padding-left: 0px;">Access status:</td>
                                        <td class="s3x">
                                            <span class="atomic">
                                                <?php echo (@$data->denny_client == 1 && $data->allow_client == 0) ? '<b style="color: red">Chặn</b>' : ((@$data->denny_client == 0 && $data->allow_client == 1) ? '<b style="color: green">Vào trực tiếp</b>' : 'Bình thường') ?>
                                            </span>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>


                </div>
                <div class="column-50" style="width: 60%">
                    <div class="mapgoogle" id="googleMap" style="height: 200px"></div>

                </div>
            </div>

            <div class="mapgoogle">
                <h3>Usage</h3>
                <div id="container" style="min-width: 310px; width: 100%;height: 250px; margin: 0 auto"></div>
            </div>
        </div>
    </div>
</div>
<style>
    #pagination{
    }
    #pagination a{
        padding: 5px 10px;
        margin: 10px 2px;
        border: 1px solid #CCC;
        background: #6E6E6E;
        color: #FFF;
    }
    #pagination strong{
        padding: 5px 10px;
        margin: 10px 2px;
        border: 1px solid #CCC;
        background-color: #FFF;
    }
    .modal-backdrop{
        top: -1000px !important;
    }
</style>
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
            $(function () {


            var chart = AmCharts.makeChart("container", {
            "type": "serial",
                    "theme": "light",
                    "autoMarginOffset": 20,
                    "dataDateFormat": "YYYY-MM-DD",
                    "valueAxes": [{
                    "id": "v1",
                            "axisAlpha": 0,
                            "position": "left"
                    }],
                    "balloon": {
                    "borderThickness": 1,
                            "shadowAlpha": 0
                    },
                    "graphs": [{
                    "id": "g1",
                            "bullet": "round",
                            "bulletBorderAlpha": 1,
                            "bulletColor": "#FFFFFF",
                            "bulletSize": 5,
                            "hideBulletsCount": 50,
                            "lineThickness": 2,
                            "title": "red line",
                            "useLineColorForBulletBorder": true,
                            "valueField": "value",
                            "balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[type]]</div>"
                    }],
                    "chartScrollbar": {
                    "graph": "g1",
                            "oppositeAxis": false,
                            "offset": 30,
                            "scrollbarHeight": 50,
                            "backgroundAlpha": 0,
                            "selectedBackgroundAlpha": 0.1,
                            "selectedBackgroundColor": "#888888",
                            "graphFillAlpha": 0,
                            "graphLineAlpha": 0.5,
                            "selectedGraphFillAlpha": 0,
                            "selectedGraphLineAlpha": 1,
                            "autoGridCount": true,
                            "color": "#AAAAAA"
                    },
                    "chartCursor": {
                    "pan": true,
                            "valueLineEnabled": true,
                            "valueLineBalloonEnabled": true,
                            "cursorAlpha": 0,
                            "valueLineAlpha": 0.2
                    },
                    "categoryField": "date",
                    "categoryAxis": {
                    "parseDates": true,
                            "dashLength": 1,
                            "minorGridEnabled": true
                    },
                    "export": {
                    "enabled": true
                    },
<?php if (@$charts): ?>
                "dataProvider": [<?php foreach ($charts AS $el => $le): ?>{"date": "<?php echo $le->acctstoptime ?>", "value": "<?php echo ($le->bw / 1048576); ?>", "type": "<?php
        $ds = $fview->formatSizeUnitschart($le->bw);
        echo $ds['amount'] . ' ' . $ds['type'];
        ?>", },<?php endforeach; ?>]
<?php else: ?>
                "dataProvider": []
<?php endif; ?>
            });
                    chart.addListener("rendered", zoomChart);
                    zoomChart();
                    function zoomChart() {
                    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
                    }

            });
            $(function ()
            {
            var map;
                    function initialize() {
                    var lat = <?php echo $data->lat?>;
                            var _lng = <?php echo $data->long?>;
                            var address = "<?php echo $data->address?>";
                            var mapProp = {
                            center: new google.maps.LatLng(lat, _lng),
                                    zoom: 14,
                                    mapTypeId: google.maps.MapTypeId.ROADMAP
                            };
                            map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
                            var myLatlng = new google.maps.LatLng(lat, _lng);
                            var popup = new google.maps.InfoWindow({content: address});
                            var marker = new google.maps.Marker({position: myLatlng, map: map, html: address, icon: '', animation: google.maps.Animation.DROP});
                            google.maps.event.addListener(marker, 'mouseover', function (e) {
                            popup.setContent(this.html);
                                    popup.open(map, this);
                            });
                            google.maps.event.addListener(marker, 'mouseout', function (e) {
                            popup.setContent(this.html);
                            });
                    }
            google.maps.event.addDomListener(window, 'load', initialize);
                    $('#save-name-device').click(function()
            {
            $.ajax({
            type: 'get',
                    url: '<?php echo site_url() ?>save-name-device',
                    data: ({_name: $('#namedevice').val(), id: $('#id').val(), mac: $('#mac').val()}),
                    success: function(_data)
                    {
                    window.location = window.location.href;
                    }
            });
            });
                    $('.change-method-access-device').click(function()
            {
            var r = confirm("Bạn có chắc chắn muốn thay đổi trạng thái người dùng này? \nNếu bạn đồng ý thay đổi, mọi thay đổi sẽ có hiệu lực sau 2 phút");
                    if (r == true) {
            var mac = $(this).data('mac');
                    var id = $(this).data('id');
                    var type = $(this).data('type');
                    changestatusaccess(mac, id, type);
            }
            });
            });
            function changestatusaccess(mac, id, type)
            {
            $.ajax({
            type: 'get',
                    url: '<?php echo site_url() ?>denny-allow-customer-device',
                    data: ({mac: mac, id: id, type: type}),
                    success: function(_data)
                    {
                    window.location = window.location.href;
                    }
            });
            }



</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Sửa tên thiết bị người dùng</h4>
            </div>
            <div class="modal-body">
                <input type="text" name="namedevice" id="namedevice" style="width: 200px;" value="<?php echo $data->vname ? $data->vname : $data->callingstationid ?>">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="save-name-device">Save changes</button>
            </div>
        </div>
    </div>
</div>